<template>
	<view>
		<view class="container">
			<!-- 头部 -->
			<view class="header">
				<text class="app-title">跨境洋货仓</text>
				<view style="display: flex; padding-top: 4px;">
					<view>
						<u-picker :show="show" @confirm="confirm" :columns="columns"></u-picker>
						<u-button @click="show = true" style="margin-left: 4px;">地址</u-button>
					</view>
					<!-- <u-button type="primary" style="width: 60px; " text="地址"></u-button> -->
					<u--input placeholder="输入商品" prefixIcon="scan" class="u-inputDiv"
						prefixIconStyle="font-size: 22px;color: #909399" />
					<u-button type="primary" style="width: 60px; margin-left: -20px; border-radius: 10px;"
						text="搜索"></u-button>
				</view>
			</view>

			<!-- 轮播图 -->
			<view class="wrap">
				<u-swiper :list="list2" keyName="image" showTitle :autoplay="false" circular autoplay></u-swiper>
			</view>

			<!-- 导航标签 -->
			<view class="nav-tags">
				<view class="tag" v-for="(tag, index) in navTags" :key="index">
					<image class="tag-icon" src="../../static/earth.svg" />
					<text class="tag-text">{{ tag }}</text>
				</view>
			</view>
		</view>

		<view class="u-page" style="width: 96%; margin-left: 4px;">

			<!-- 商品分类 -->
			<view class="u-demo-block">
				<u-scroll-list>
					<view class="scroll-list">
						<view class="scroll-list__line" v-for="(item, index) in menuArr" :key="index">
							<view class="scroll-list__line__item" v-for="(item1, index1) in item" :key="index1"
								:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
								<image class="scroll-list__line__item__image" :src="menuBaseUrl + item1.icon" mode="">
								</image>
								<text class="scroll-list__line__item__text">{{ item1.name }}</text>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>

			<view class="u-demo-block" style="text-align: center;">
				<text class="u-demo-block__title" style="margin-bottom: 15px;">商品精选</text>
				<u-scroll-list style="margin-top: 4px;" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c"
					@right="right" @left="left">
					<view class="scroll-list" style="flex-direction: row;">
						<view class="scroll-list__goods-item" v-for="(item, index) in goodsArr" :key="index"
							:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']">
							<image class="scroll-list__goods-item__image" :src="goodsBaseUrl + item.thumbnail" mode="">
							</image>
							<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
						</view>
						<view class="scroll-list__show-more" @tap="showMore">
							<text class="scroll-list__show-more__text">查看更多</text>
							<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
						</view>
					</view>
				</u-scroll-list>
			</view>

			<!-- 瀑布流 -->
			<view>
				<u-grid :border="false" col="2" style="margin-left: 14px;">
					<u-grid-item v-for="(product, index) in products" :key="index">
						<u-image class="product-image1" :src="product.image" mode="aspectFill" width="96%"
							height="200rpx" />
						<view class="product-info1">
							<view class="product-name1">{{ product.name | truncate(10) }}</view>
							<view class="product-footer1">
								<view class="product-price1">￥{{ product.price }}</view>
								<view class="product-brand1">{{ product.brand }}</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				columns: [
					['中国', '美国', '日本']
				],
				products: [{
						id: 1,
						image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
						name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
						price: 199.99,
						brand: '品牌A'
					},
					{
						id: 1,
						image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
						name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
						price: 199.99,
						brand: '品牌A'
					},
					{
						id: 1,
						image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
						name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
						price: 199.99,
						brand: '品牌A'
					},
					{
						id: 1,
						image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
						name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
						price: 199.99,
						brand: '品牌A'
					},
					{
						id: 1,
						image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
						name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
						price: 199.99,
						brand: '品牌A'
					},
					{
						id: 1,
						image: 'https://cdn.uviewui.com/uview/goods/1.jpg',
						name: '这是商品名称可能会很长很长很长很长很长很长很长很长',
						price: 199.99,
						brand: '品牌A'
					},
				],
				goodsBaseUrl: 'https://cdn.uviewui.com/uview/goods/',
				menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
				goodsArr: [{
						price: '230.5',
						thumbnail: '1.jpg'
					},
					{
						price: '74.1',
						thumbnail: '2.jpg'
					},
					{
						price: '8457',
						thumbnail: '6.jpg'
					},
					{
						price: '1442',
						thumbnail: '5.jpg'
					},
					{
						price: '541',
						thumbnail: '2.jpg'
					},
					{
						price: '234',
						thumbnail: '3.jpg'
					},
					{
						price: '562',
						thumbnail: '4.jpg'
					},
					{
						price: '251.5',
						thumbnail: '1.jpg'
					}
				],
				menuArr: [
					[{
							name: '天猫新品',
							icon: '11.png'
						},
						{
							name: '今日爆款',
							icon: '9.png'
						}, {
							name: '天猫国际',
							icon: '17.png'
						}, {
							name: '饿了么',
							icon: '6.png'
						}, {
							name: '天猫超市',
							icon: '11.png'
						}, {
							name: '分类',
							icon: '2.png'
						}, {
							name: '天猫美食',
							icon: '3.png'
						}, {
							name: '阿里健康',
							icon: '12.png'
						}, {
							name: '口碑生活',
							icon: '7.png'
						}
					],
					[{
							name: '充值中心',
							icon: '8.png'
						},
						{
							name: '机票酒店',
							icon: '10.png'
						}, {
							name: '金币庄园',
							icon: '18.png'
						}, {
							name: '阿里拍卖',
							icon: '15.png'
						}, {
							name: '淘宝吃货',
							icon: '16.png'
						}, {
							name: '闲鱼',
							icon: '4.png'
						}, {
							name: '会员中心',
							icon: '6.png'
						}, {
							name: '造点新货',
							icon: '13.png'
						}, {
							name: '土货鲜食',
							icon: '14.png'
						}
					]
				],
				list2: [{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				carouselImages: [
					"../../static/xy.jpg",
					"../../static/htd.jpg",
					"../../static/金珠.jpg",
				],
				currentImage: 0,
				intervalId: null,
				startX: 0,
				endX: 0,
				categories: [{
						name: "母婴儿童",
						icon: "../../static/母婴儿童.svg"
					},
					{
						name: "美妆护肤",
						icon: "../../static/美妆护肤.svg"
					},
					{
						name: "营养保健",
						icon: "../../static/营养保健.svg"
					},
					{
						name: "个人护理",
						icon: "../../static/个人护理.svg"
					},
					{
						name: "时尚轻奢",
						icon: "../../static/时尚轻奢.svg"
					},
					{
						name: "家居生活",
						icon: "../../static/家居生活.svg"
					},
					{
						name: "每日精选",
						icon: "../../static/每日精选.svg"
					},
					{
						name: "热销排行",
						icon: "../../static/热销排行.svg"
					},
				],
				navTags: ['全球采购', '正品保证', '品质潮流', '假一赔十'],
				paginationDots: [0, 1, 2, 3],
				currentPage: 0,
			};
		},
		filters: {
			truncate(value, length) {
				if (!value) return '';
				return value.length > length ? value.slice(0, length) + '...' : value;
			}
		},
		mounted() {

		},
		methods: {
			splitMenuArr() {
				// 将 menuArr 分成两行，每行包含一半的商品
				const halfLength = Math.ceil(this.menuArr.length / 2);
				return [this.menuArr.slice(0, halfLength), this.menuArr.slice(halfLength)];
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.show = false
			},
			showMore() {
				uni.$u.toast('查看更多')
			},
			left() {
				console.log('left');
			},
			right() {
				console.log('right');
			}
		},
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 40rpx;
		margin-top: -20px;
		width: 100%;
	}

	.u-inputDiv {
		width: 220px;
		max-width: 260px;
		margin-left: 20px;
		border-radius: 10px;
		border-right: none;
		background-color: #f9f9f9;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f9f9f9;
	}

	.header {
		background-color: #2ac2d2;
		padding: 10px 15px;
		width: 100%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.app-title {
		color: #ffffff;
		font-size: 16px;
		margin-top: -40px;
		margin-left: 4px;
		font-weight: bold;
		font-family: "宋体";
	}

	.search-bar {
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 10px;
		margin-left: -40px;
	}

	.search-input {
		border: 1px solid #ddd;
		padding: 16px;
		height: 10px !important;
		min-height: auto;
		margin-top: 20px;
		margin-left: -44px;
		padding-left: 35px;
		border-radius: 5px;
	}

	.search-icon {
		position: absolute;
		left: -30px;
		top: 65%;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
	}

	.open-store {
		background-color: #483d8b;
		color: white;
		height: 50px;
		border-radius: 5px;
		padding: 8px 15px;
	}

	.carousel {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.carousel-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		padding: 10px;
	}

	.carousel-inner {
		display: flex;
		transition: transform 0.5s ease-in-out;
	}

	.carousel-item {
		min-width: 100%;
		flex-shrink: 0;
	}

	.carousel-img {
		width: 100%;
	}

	.nav-tags {
		display: flex;
		justify-content: space-between;
		margin-top: -10px;
	}

	.tag {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2px 4px;
		height: 40px;
		margin-right: 5px;
		background: linear-gradient(135deg, #7f7fd5, #86a8e7);
		color: white;
		border-radius: 3px;
	}

	.tag-icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.tag-text {
		font-size: 10px;
		width: 50px;
		padding-right: 2px;
		margin-right: 10px;
		color: white;
	}

	.categories {
		/* 设置容器的宽度和最大宽度 */
		width: 100%;
		max-width: 1200px;
		/* 根据实际布局需要设置 */

		/* 设置容器的内边距，提供一些空间 */
		padding: 20px;

		/* 设置容器的背景颜色，根据设计需求 */
		background-color: #fff;
		/* 白色背景 */

		/* 设置容器的外边距，与其他元素保持距离 */
		margin: 0 auto;
		/* 上下外边距为0，左右自动（居中） */

		/* 设置容器的边框，如果需要 */
		border: 1px solid #eaeaea;
		/* 轻微的边框 */

		/* 设置容器的盒子阴影，增加层次感 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 轻微的阴影 */

		/* 设置容器的圆角，使边角更柔和 */
		border-radius: 8px;
		/* 轻微的圆角 */

		/* 设置容器的对齐方式，这里以居中为例 */
		text-align: center;

		/* 设置容器的布局方式，使其内部的滚动列表水平滚动 */
		display: flex;
		justify-content: center;
		/* 水平居中对齐 */
	}

	.category {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 5px;
		text-align: center;
	}

	.category-icon {
		width: 40px;
		height: 40px;
	}

	.category-name {
		margin-top: 5px;
		font-size: 14px;
	}

	.product-image1 {
		width: 100%;
		height: 200rpx;
		border-radius: 15px;
		/* 圆角 */
	}

	.product-info1 {
		margin-left: 4px;
		margin-right: 4px;

	}

	.product-name1 {
		font-size: 14px;
		color: #333;
		margin-left: -40px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 10px;
		/* 与价格和品牌名的距离 */
	}

	.product-footer1 {
		display: flex;
		justify-content: space-between;
		/* 使价格和品牌名分别对齐左右 */
		width: 100%;
	}

	.product-price1 {
		font-size: 16px;
		margin-left: -40px;
		color: #f00;
		margin-bottom: 10px;
	}

	.product-brand1 {
		font-size: 12px;
		margin-top: 2px;
		color: #666;
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;

				&__image {
					width: 61px;
					height: 48px;
				}

				&__text {
					margin-top: 5px;
					color: $u-content-color;
					font-size: 12px;
					text-align: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}
</style>